<template>
	<view>
		<view class="header">
			<view class="header-left"><image src="/static/back.png" @click="back" /></view>
		</view>

		<view class="top">
		    <image src="/static/ai.png" />
		    <view class="title">
		        人工智能创作
		    </view>
		    <view class="title2">
		        AI Creation.
		    </view>
		</view>

		<view class="createHeader">
			<view class="createTitle">创作要求</view>
			<view class="example" @click="setExamplePopup">示例</view>
		</view>
		<view class="input"><textarea class="inputText" placeholder="提一个创作主题,比如写一篇童话故事?" maxlength="-1" auto-height="true" v-model="content" /></view>

		<view class="btn" @click="sendContent">发送需求</view>

		
		<!-- <view class="bottom">
		    Based on OpenAI API (gpt-3.5-turbo).
		</view> -->
	</view>
</template>

<script>
export default {
	data() {
		return {
			content: '',
		};
	},
	methods: {
		back() {
			uni.navigateBack();
		},
		sendContent() {
			console.log(this.content);
			uni.navigateTo({
				url: `../aiChat/aiChat?content=${this.content}`
			});
		},
	}
};
</script>

<style>
.header {
	display: flex;
	justify-content: space-between;
	height: 100rpx;
	align-items: center;
	width: 100%;
}

.header-left {
	display: flex;
	align-items: center;
	padding-left: 30rpx;
}

.header-title {
	font-size: 32rpx;
	margin-left: 10rpx;
}

.header image {
	width: 45rpx;
	height: 45rpx;
	padding: 10rpx;
}

.top {
	margin: 50rpx;
	margin-bottom: 65rpx;
}

.top > image {
	width: 130rpx;
	height: 130rpx;
}

.title {
	color: rgba(48, 184, 156, 1);
	font-weight: 800;
	font-size: 42rpx;
	margin-top: 25rpx;
}

.title2 {
	margin-top: 7rpx;
	font-weight: 800;
	font-size: 35rpx;
	color: transparent;
	background: linear-gradient(
		90deg,
		rgba(42, 130, 228, 1) 0%,
		rgba(67, 207, 124, 1) 29.72%,
		rgba(121, 72, 234, 1) 57.22%,
		rgba(48, 184, 156, 1) 75.28%,
		rgba(255, 141, 26, 1) 100%
	);
	-webkit-background-clip: text;
}

.createTitle {
	color: rgba(0, 0, 0, 0.5);
	font-size: 35rpx;
}

.createHeader {
	display: flex;
	margin: 30rpx 50rpx;
	justify-content: space-between;
}

.example {
	color: rgba(48, 184, 156, 1);
	font-size: 30rpx;
}

.input {
	z-index: 99;
	padding: 30rpx 0;
	margin: 0rpx 50rpx;
	border-radius: 5px;
	font-size: 32rpx;
	background: rgba(204, 204, 204, 0.22);
}

.inputText {
	padding: 0rpx 30rpx;
}

.btn {
	z-index: 99999;
	color: rgba(48, 184, 156, 1);
	text-align: center;
	padding: 30rpx 0;
	margin: 60rpx 50rpx;
	border-radius: 5px;
	background: rgba(48, 184, 156, 0.11);
	font-size: 31rpx;
}

.bottom {
	z-index: 1;
	width: 100%;
	text-align: center;
	position: absolute;
	bottom: 30rpx;
	color: rgba(0, 0, 0, 0.32);
	font-size: 25rpx;
}

/* 弹出层 */

.popup-content {
	padding: 40rpx;
}

.popup-header {
	display: flex;
	height: 80rpx;
	justify-content: space-between;
	align-items: center;
	border-bottom: 1rpx solid rgba(0, 0, 0, 0.06);
	padding-bottom: 15rpx;
}

.popup-header-title {
	font-size: 35rpx;
	font-weight: 600;
}

.notice-content {
	margin: 40rpx 0;
	font-size: 34rpx;
}

.useExample {
	width: 100%;
	height: 110rpx;
	line-height: 110rpx;
	color: #fff;
	font-size: 32rpx;
	text-align: center;
	border-radius: 15px;
	background: rgba(48, 184, 156, 1);
}
</style>
